import React, { Component } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";
import { InterfaceG } from "@config/Config";
import BackModal from "@component/backModal/index";
import WalletXhfTwoInfo from "@views/viewCommon/walletXhfTwoInfo";
import yhTools from "@tools/yh";
import { canCloseH5 } from "@/tools/listenHistory";

@connect(state => ({
	mobile: state.getAppPlatformsDatas.mobile
}))
class certification extends Component {
	constructor(props) {
		super(props);
		this.state = {
			idCard: "",
			userName: "",
			isVisible: false,
			isRead: false,
			from: "",
			isBackModalVisible: false,
			headerBanner: "",
			userBankPhone: "",
			inputDisabled: false, //是否已过四要素
			student: false //是否显示学生协议
		};
	}

	componentDidMount() {
		this.queryTwoElementInfoAndMobilePhone();
		this.getBannerData();
	}

	/**
	 * @msg: 获取BannerData数据
	 * @param {*}
	 * @return {*}
	 */
	getBannerData = () => {
		let queryMarketCouponInfo = this.queryMarketCouponInfo();
		let getBannerImg = this.getBannerImg();
		Promise.all([queryMarketCouponInfo, getBannerImg]).finally(() => {
			const { couponInfo, bannerImg } = this.state;
			let bannerData = { ...couponInfo, ...bannerImg };
			console.log("bannerData--->", bannerData);
			this.setState({
				bannerData
			});
		});
	};

	/**
	 * @msg: 获取图片配置banner
	 * @param {*}
	 * @return {*}
	 */
	getBannerImg() {
		return new Promise(async (resolve, reject) => {
			let pageType = await this.xhfCreditApplying_getSuperviseSign();
			const params = {
				url: InterfaceG.getChannelBannerList,
				params: {
					pageType,
					productNo: "601"
				},
				_alertShow: false
			};
			yhTools.request(params).then(res => {
				const { code, data = {} } = res;
				if (code == "0") {
					this.setState(
						{
							bannerImg: {
								displayBannerList: data["2"],
								bannerList: data["1"],
								inputBgImg:
									"https://jrcdn.yonghui.cn/yhjr/yh_supermarket_sdk/yhLife/wallet/wallet-input-bg.png"
							}
						},
						() => {
							resolve();
						}
					);
				}
			});
		});
	}

	/**
	 * @msg: 获取监管标识
	 * @param {*}
	 * @return {*}
	 */
	xhfCreditApplying_getSuperviseSign = () => {
		Toast.loading("加载中...", 100);
		const objs = {
			url: InterfaceG.xhfCreditApplying_getSuperviseSign,
			params: {}
		};
		return yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				//监管标识 0否 1是
				if (res.data.jgFlag === "1") {
					return "xhf_612-613_image_jg";
				}
				return "xhf_onece_pay_image";
			} else {
				Toast.info(res.message, 2);
				return "xhf_onece_pay_image";
			}
		});
	};

	//返回显示 二要素
	queryTwoElementInfoAndMobilePhone() {
		const objs = {
			url: InterfaceG.xhf_credit_initTwoElement,
			params: {}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const data = res.data;
				if (data.userName && data.idNo) {
					this.setState({
						userBankPhone: data.mobilePhone,
						idCard: data.idNo,
						userName: data.userName,
						inputDisabled: true,
						student: data.student
					});
				}
				Toast.hide();
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	/**
	 * @msg: 获取优惠金额和banner
	 * @param {*}
	 * @return {*}
	 */
	queryMarketCouponInfo() {
		return new Promise((resolve, reject) => {
			const objs = {
				url: InterfaceG.queryMarketCouponInfo,
				params: {
					typeCode: "yhsh_612_613_pay",
					version: "1.0"
				}
			};
			yhTools.request(objs).then(res => {
				const { data, code } = res;
				if (code === "0") {
					const {
						couponAllValue,
						couponValue,
						displayStatus,
						orderDiscountValue,
						orderValue,
						version
					} = data;
					this.setState(
						{
							couponInfo: {
								couponAllValue,
								couponValue,
								displayStatus,
								orderDiscountValue,
								orderValue,
								version
							}
						},
						() => {
							resolve();
						}
					);
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	cancelOrder() {
		yhTools.noticePayCanceled("支付取消");
	}
	//二要素提交
	submit(value) {
		if (this.state.inputDisabled) {
			// 去二要素人脸
			this.props.history.push(`/faceRecognition/613`);
		} else {
			Toast.loading("加载中...", 100);
			yhTools.request(value).then(res => {
				Toast.hide();
				if (res.code === "0") {
					this.props.history.push(`/faceRecognition/613`);
					let info = {
						userName: value.params.userName,
						idNo: value.params.idNo
					};
					let infoStr = JSON.stringify(info);
					sessionStorage.setItem("credit_faceParams_info", infoStr);
				} else {
					Toast.info(res.message, 2);
				}
			});
		}
	}
	onModalClick(booleanValue) {
		this.setState({
			isBackModalVisible: false
		});
		if (!booleanValue) {
			if (canCloseH5()) {
				yhTools.noticePayCanceled("支付取消");
			} else {
				this.props.history.goBack();
			}
		}
	}
	showModal() {
		this.setState({
			isBackModalVisible: true
		});
	}
	render() {
		const {
			idCard,
			userName,
			inputDisabled,
			isBackModalVisible,
			student,
			headerBanner,
			bannerData
		} = this.state;
		const params = {
			idCard,
			userName,
			inputDisabled,
			student,
			headerBanner,
			history: this.props.history
		};
		const _pageParams = {
			header: {
				title: "开通并支付"
			},
			componentDidRecover: () => {
				this.queryTwoElementInfoAndMobilePhone();
			},
			cacheLifecycles: this.props.cacheLifecycles,
			isModal: true,
			history: this.props.history
		};
		return (
			<MainLayout
				handleBack={this.showModal.bind(this)}
				pageParams={_pageParams}
				isScroll={true}
			>
				<BackModal
					product={612}
					isVisible={isBackModalVisible}
					onClick={this.onModalClick.bind(this)}
					bannerData={bannerData}
				/>
				<WalletXhfTwoInfo
					pageParams={params}
					Submit={this.submit.bind(this)}
					bannerData={bannerData}
				></WalletXhfTwoInfo>
			</MainLayout>
		);
	}
}
export default certification;
